<style lang="less">
 @import './list-item.less';
</style>

<template>
  <div class="list-item">
    <div class="list-item-side">
      <v-like :number="100" />

      <v-score-editor :value="100" :weight="0.5" />
    </div>

    <div class="list-item-main">
      <div class="list-item-head">
        <nuxt-link :to="`/${dataSource.id}`">
          {{ dataSource.title }}
        </nuxt-link>
      </div>

      <div class="list-item-body">
        <div
          v-if="dataSource.thumb"
          class="list-item-thumb"
        >
          <img :src="dataSource.thumb" alt="">
        </div>

        <div class="list-item-content">
          <div class="list-item-intro">
            <v-tags size="small" :data-source="dataSource.tags" />

            <span class="list-item-link">
              <a
                target="_blank"
                class="link-silver"
                href="https://mp.weixin.qq.com"
              >mp.weixin.qq.com</a>
            </span>

            <a class="list-item-similar" href="">
              <v-icon type="star" /> 同站内容
            </a>
          </div>

          <div class="list-item-author">
            <a-avatar
              size="small"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
            <span class="text-concrete">分享者：小红帽</span>
            <span class="text-lights">2020/04/15 19:37:01</span>
          </div>

          <div class="list-item-summary">
            对于顺丰来说，此次上线丰食外卖平台有两大契机：一是外卖界的两大头部企业美团和饿了么均与餐饮商家存在或多或少的佣金问题，这一问题在餐饮行业大受疫情影
          </div>
        </div>
      </div>

      <div class="list-item-foot">
        <div class="list-item-action">
          <nuxt-link to="/" class="link-secondary">
            <v-icon type="message" />
            评论1314
          </nuxt-link>
        </div>

        <div class="list-item-action">
          <nuxt-link to="/" class="link-secondary">
            <v-icon type="collect" />
            已收藏
          </nuxt-link>
        </div>

        <div class="list-item-action">
          <a-popover
            trigger="click"
            placement="bottom"
            overlay-class-name="popover"
          >
            <a href="javascript:;" class="link-secondary">
              <v-icon type="safe" />
              举报
            </a>

            <template slot="content">
              <v-todos
                :data-source="[
                  { id: '/?1', name: '八卦帖子' },
                  { id: '/?2', name: '已发布的' },
                  { id: '/?3', name: '垃圾帖子' },
                  { id: '/?4', name: '失效链接' },
                  { id: '/?5', name: '取消' },
                ]"
                class="context-menus"
                @click="onClickPopMenu"
              />
            </template>
          </a-popover>
        </div>

        <div class="list-item-action">
          <nuxt-link to="/" class="link-secondary">
            <v-icon type="pencil" />
            建议
          </nuxt-link>
        </div>

        <div class="list-item-action">
          <nuxt-link to="/" class="link-secondary">
            <v-icon type="write" />
            编辑
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Icon from '~/components/icon'
import Tags from '~/components/tags'
import Like from '~/components/like'
import Todos from '~/components/todos'
import ScoreEditor from '~/components/score-editor'

export default {
  components: {
    'v-icon': Icon,
    'v-tags': Tags,
    'v-like': Like,
    'v-todos': Todos,
    'v-score-editor': ScoreEditor,
  },

  props: {
    dataSource: {
      type: Object,
      default () {
        return {
          tags: [],
        }
      },
    },
  },

  methods: {
    onClickPopMenu (data) {
      console.log(data)
    },
  },
}
</script>
